import React, { Component } from 'react'
import { Row, Col, Input, Button } from 'antd';
import { Form } from '../../common/form';
import { TablePage } from '../../common/table-page';
import { connectRouter } from '../../../mixins/router';
const TableColumn = TablePage.Column;
import history from '../../../history'
import api from '../../../api/api';
import { testPermission } from '../../common/HasPermission';

const tableDef = TablePage.def({
    sequenceNo : {},
});
const query = {
    sequenceNo:'',
    skip:0,
    limit:11,
  }
class GroupOrderInsurance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            payOrderList:{}
        }
    }

    loadData = ({ values, pageIndex, pageSize }) => {
        const query = {};

        pageIndex = pageIndex || 1
        pageSize = pageSize || 10
        let skip = (pageIndex - 1) * pageSize
        query.skip = skip < 0 ? 0 : skip
        query.limit = pageSize + 1
        if(values.sequenceNo){
            query.sequenceNo = values.sequenceNo;
        }

        // console.log('pageSize:',pageSize)
        this.getPayOrderList(query)
    }

    getPayOrderList = async (query)=>{
        let router = this.props.router
        let payOrderList = {}
        let result = await api.getGroupPayOrderList(query)
        // let result = [
        //     {
        //         sequenceNo:1,
        //         operName:'万户',
        //         operDate:'2021-01-01 00:00:00',

        //     }
        // ]


        if(result){
            let pageIndex = +router.query.p || 1
            let pageSize = +router.query.ps || 10
            payOrderList.status  = 'fulfilled'
            payOrderList.pageIndex  = pageIndex
            payOrderList.pageSize  = pageSize
            payOrderList.count  = (pageIndex - 1) * pageSize + result.length
            if(result.length > pageSize){
                result = result.slice(0,-1)
            }
            payOrderList.list  = result
            this.setState({
                payOrderList
            })
        }
    }

    resetData = () => {
        let router = this.props.router
        let pageIndex = +router.query.p || 1
        let pageSize = +router.query.ps || 10
        let skip = (pageIndex - 1) * pageSize
        query.skip = skip < 0 ? 0 : skip
        query.limit = pageSize + 1
        this.getPayOrderList(query)
    }

    showDetail=(rowData)=>{
        history.push(`/GroupPayOrderDetail?id=${rowData.id}&r=${encodeURIComponent(this.props.router.fullPath)}`)
    }
    goPayMoney =()=>{
        history.push(`/GroupPay?r=${encodeURIComponent(this.props.router.fullPath)}`)
    }

    render() {
        const { payOrderList, } = this.state;
        return (
            <div>
                <TablePage
                    def={tableDef}
                    data={ payOrderList }
                    autoLoad={false}
                    onLoadData={this.loadData}
                    onResetData={this.resetData}
                    tableRef={table => this.table = table}
                    rowKey='id'
                    renderFormFields={(values, loadData) => {
                        return <Row gutter={10} className="block filter-box">
                            <Col span={4}>
                                <Form.Item field="sequenceNo" height="auto">
                                    <Input placeholder="请输入缴费单号" onPressEnter={loadData} maxLength={'8'} />
                                </Form.Item>
                            </Col>
                            <Col span={3}>
                                <Button onClick={loadData} style={{ width: '100%', 'minWidth': 0 }} type="primary">查询</Button>
                            </Col>
                            {
                                testPermission('groupInsurance.payment') ? (
                                    <Col span={3}>
                                        <Button onClick={this.goPayMoney} style={{ width: '100%', 'minWidth': 0 }} type="primary">缴费</Button>
                                    </Col>
                                ) : ''
                            }
                        </Row>
                    }}
                >
                    <TableColumn title="缴费单号" className="singleline max-w-200"
                        dataIndex="sequenceNo"
                        key="sequenceNo"
                        onCellClick={(insurance) => this.showDetail(insurance)}
                        render={(text)=>{
                            return <span className="clickable">{text}</span>
                        }}
                    />
                    <TableColumn title="提交人" className="singleline max-w-200"
                        dataIndex="operName"
                        key="operName"
                    />
                    <TableColumn title="提交时间" className="singleline"
                        dataIndex="operDate"
                        key="operDate"
                    />

                    {
                    <TableColumn title="操作" className="singleline"
                        dataIndex="status"
                        key="op"
                        renderTip={() => null}
                        render={(status, insurance) => {
                            return (
                                <span>
                                    <span className="clickable" onClick={() => this.showDetail(insurance)}>查看</span>
                                </span>
                            )
                        }}
                    />
                    }
                </TablePage>
            </div>
        )
    }
}

export default connectRouter(GroupOrderInsurance);
